<template>
  <div style="width: 60%; margin: 10px auto">
    <div class="card" style="padding: 20px; display: flex; grid-gap: 20px; margin-bottom: 20px">
      <img :src="data.shop.avatar" alt="" style="width: 200px; height: 200px">
      <div style="flex: 1; display: flex; flex-direction: column; justify-content: space-around">
        <div style="font-size: 20px; font-weight: bold; margin-bottom: 10px">{{ data.shop.name }}</div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">宠物类型：</span>
          <span>{{ JSON.parse(data.shop.sellPet || '[]').join('、') }}</span>
        </div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">联系方式：</span>
          <span>{{ data.shop.phone }}</span>
        </div>
        <div style="margin-bottom: 10px">
          <span style="color: #666">店铺地址：</span>
          <span>{{ data.shop.address }}</span>
        </div>
        <div style="text-align: justify; line-height: 20px">
          <span style="color: #666">店铺介绍：</span>
          <span>{{ data.shop.introduce }}</span>
        </div>
      </div>
    </div>

    <div class="card" style="padding: 20px; margin-bottom: 20px">
      <div style="font-size: 24px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #ccc">宠物信息</div>
      <div style="padding-top: 20px" v-if="data.total > 0">
        <el-row :gutter="20">
         <el-col :span="6" v-for="item in data.petList" :key="item.id">
           <div style="cursor: pointer" @click="router.push('/front/petDetail?id=' + item.id)">
             <img :src="item.img" alt="" style="width: 100%; height: 200px; display: block; border-radius: 5px">
             <div style="margin: 10px 0; display: flex; align-items: center">
               <el-tag type="info" v-if="item.sex === '公'">公</el-tag>
               <el-tag type="primary" v-if="item.sex === '母'">母</el-tag>
               <span style="font-size: 20px; font-weight: bold; margin-left: 5px">{{ item.name }}</span>
             </div>
             <div style="font-size: 20px; color: red">￥{{ item.price }}</div>
           </div>
         </el-col>
        </el-row>

        <div style="margin-top: 20px" v-if="data.total">
          <el-pagination @current-change="loadPetList" layout="total, prev, pager, next" :page-size="data.pageSize" v-model:current-page="data.pageNum" :total="data.total" />
        </div>
      </div>
      <div style="padding-top: 40px; text-align: center; color: #666" v-else>
        暂无宠物...
      </div>
    </div>

    <div class="card" style="padding: 20px; margin-bottom: 20px">
      <div style="font-size: 24px; font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #ccc">宠物用品信息</div>
      <div style="padding-top: 20px" v-if="data.goodsTotal > 0">
        <el-row :gutter="20">
          <el-col :span="6" v-for="item in data.goodsList" :key="item.id">
            <div class="card" style="padding: 0; border-radius: 5px; overflow: hidden; margin-bottom: 20px">
              <img :src="item.img" alt="" style="width: 100%; height: 200px">
              <div style="padding: 10px">
                <div style="font-size: 20px; margin-bottom: 10px; display: flex; align-items: center">
                  <el-tag type="success">售卖中</el-tag>
                  <span style="font-weight: bold; margin-left: 5px; flex: 1; width: 0" class="line1">{{ item.name }}</span>
                </div>
                <div style="display: flex; align-items: center; margin: 15px 0">
                  <div style="font-size: 18px; color: red; flex: 1">￥{{ item.price }}</div>
                  <div><el-button @click="view(item)" type="primary" plain size="small">查看详情</el-button></div>
                </div>
                <div style="display: flex; align-items: center">
                  <div style="flex: 1">
                    <el-input-number v-model="item.num" :min="1" style="width: 100px" size="small"></el-input-number>
                  </div>
                  <div><el-button @click="addCart(item.id, item.num)" type="danger" size="small">加入购物车</el-button></div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>

        <div style="margin-top: 20px" v-if="data.goodsTotal">
          <el-pagination @current-change="loadGoodsList" layout="total, prev, pager, next" :page-size="data.goodsPageSize" v-model:current-page="data.goodsPageNum" :total="data.goodsTotal" />
        </div>
      </div>
      <div style="padding-top: 40px; text-align: center; color: #666" v-else>
        暂无宠物用品...
      </div>
    </div>

    <!-- 评价列表 -->
    <div class="card" style="padding: 20px">
      <div style="font-size: 24px; font-weight: bold; margin-bottom: 10px">评论 {{ data.totalComment }} 条</div>
      <div style="margin-bottom: 5px">
        <el-input type="textarea" :rows="3" v-model="data.form.content" placeholder="请输入评论内容"></el-input>
      </div>
      <div style="text-align: right">
        <el-button size="large" type="primary" @click="addComment(null)">发表评论</el-button>
      </div>

      <div style="margin: 20px 0">
        <div v-for="item in data.commentList" :key="item.id" >
          <div style="display: flex; grid-gap: 20px; margin-bottom: 20px">
            <img :src="item.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
            <div style="flex: 1">
              <div style="margin-bottom: 10px; color: #666">{{ item.userName }}</div>
              <div style="margin-bottom: 10px; font-size: 16px">{{ item.content }}</div>
              <div style="color: #666; margin-bottom: 10px">
                <span>时间：{{ item.time }}</span>
                <span @click="reply(item)" style="margin-left: 30px; cursor: pointer">回复</span>
                <span v-if="item.userId === data.user.id" style="margin-left: 10px; cursor: pointer" @click="delComment(item.id)">删除</span>
              </div>
              <div v-if="item.showReply">
                <el-input type="textarea" :rows="2" v-model="item.replyContent" placeholder="请输入回复内容"></el-input>
                <div style="margin-top: 5px; text-align: right">
                  <el-button type="primary" @click="addComment(item)">回复</el-button>
                </div>
              </div>
            </div>
          </div>
          <!-- 回复开始 -->
          <div style="padding-left: 70px">
            <div v-for="sub in item.children" :key="sub.id" >
              <div style="display: flex; grid-gap: 20px; margin-bottom: 20px">
                <img :src="sub.userAvatar" alt="" style="width: 50px; height: 50px; border-radius: 50%">
                <div style="flex: 1">
                  <div style="margin-bottom: 10px; color: #666">{{ sub.userName }} <span v-if="sub.parentUserName !== item.userName" style="color: #000">@{{ sub.parentUserName }}</span></div>
                  <div style="margin-bottom: 10px; font-size: 16px">{{ sub.content }}</div>
                  <div style="color: #666; margin-bottom: 10px">
                    <span>时间：{{ sub.time }}</span>
                    <span style="margin-left: 30px; cursor: pointer" @click="reply(sub)">回复</span>
                    <span v-if="sub.userId === data.user.id" style="margin-left: 10px; cursor: pointer" @click="delComment(sub.id)">删除</span>
                  </div>
                  <div v-if="sub.showReply">
                    <el-input type="textarea" :rows="2" v-model="sub.replyContent" placeholder="请输入回复内容"></el-input>
                    <div style="margin-top: 5px; text-align: right">
                      <el-button type="primary" @click="addComment(sub)">回复</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 回复结束 -->
        </div>
      </div>
    </div>

    <el-dialog title="宠物用品详情" v-model="data.goodsVisible" width="40%" destroy-on-close>
      <div style="padding: 20px; color: #333">
        <div style="text-align: center; margin-bottom: 10px"><img style="width: 50%" :src="data.goods.img" alt=""></div>
        <div style="display: flex; align-items: center; margin-bottom: 10px">
          <el-tag type="success">售卖中</el-tag>
          <span style="font-size: 20px; font-weight: bold; margin-left: 5px">{{ data.goods.name }}</span>
        </div>
        <div style="margin: 10px 0"><span style="color: #666">商品销量：</span>{{ data.goods.sale }}</div>
        <div style="margin: 10px 0"><span style="color: #666">剩余数量：</span>{{ data.goods.store }}</div>
        <div style="margin: 10px 0"><span style="color: #666">商品类型：</span>{{ data.goods.typeName }}</div>
        <div style="margin: 10px 0; text-align: justify; line-height: 20px"><span style="color: #666">商品简介：</span>{{ data.goods.descr }}</div>
        <div style="margin: 10px 0;"><span style="color: #666">商品价格：</span><span style="font-size: 18px; color: red">￥{{ data.goods.price }}</span></div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="data.goodsVisible = false">关 闭</el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request.js";
import router from "@/router/index.js";
import {ElMessage} from "element-plus";


const data = reactive({
  user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
  id: router.currentRoute.value.query.id,
  shop: {},
  petList: [],
  pageNum: 1,
  pageSize: 10,
  total: 0,
  goodsList: [],
  goodsPageNum: 1,
  goodsPageSize: 10,
  goodsTotal: 0,
  goodsVisible: false,
  goods: {},
  // 评价
  commentList: [],
  form: {},
  totalComment: 0,
  prexComment: router.currentRoute.value.path.slice(router.currentRoute.value.path.lastIndexOf('/')+1, router.currentRoute.value.path.length)
})
window.scrollTo({ top: 0 })

const loadTree = () => {
  request.get('/comment/selectTree/' + data.prexComment + data.id).then(res => {
    data.commentList = res.data
  })

  request.get('/comment/selectCount/' + data.prexComment + data.id).then(res => {
    data.totalComment = res.data ? res.data: 0
  })
}
loadTree()
const addComment = (parentComment) => {
  if (parentComment) {  // 回复
    data.form.content = parentComment.replyContent
    data.form.pid = data.prexComment + data.id + parentComment.id
    data.form.rootId = parentComment.rootId
    parentComment.replyContent = ''
  }
  if (!data.form.content) {
    ElMessage.warning('请输入评论内容')
    return
  }
  data.form.fid = data.prexComment + data.id
  request.post('/comment/add', data.form).then(res => {
    if (res.code === '200') {
      ElMessage.success('操作成功')
      data.form = {}
      loadTree()
    } else {
      ElMessage.error(res.msg)
    }
  })
}
const delComment = (id) => {
  ElMessageBox.confirm('您确定删除该评论及其子评论吗？', '删除确认', { type: 'warning' }).then(res => {
    request.delete('/comment/deepDelete/' + id).then(res => {
      if (res.code === '200') {
        ElMessage.success("删除成功")
        loadTree()
      } else {
        ElMessage.error(res.msg)
      }
    })
  }).catch(err => {
    console.error(err)
  })
}
const reply = (comment) => {
  comment.showReply = !comment.showReply
  comment.replyContent = ''
}


const addCart = (goodsId, num) => {
  request.post('/cart/add', { goodsId: goodsId, num: num}).then(res => {
    if (res.code === '200') {
      ElMessage.success('加入成功')
    } else {
      ElMessage.error(res.msg)
    }
  })
}

const view = (goods) => {
  data.goods = goods
  data.goodsVisible = true
}

request.get('/petShop/selectById/' + data.id).then(res => {
  data.shop = res.data
})

const loadPetList = () => {
  // 查询宠物列表
  request.get('/pet/selectPage', {
    params: {
      pageNum: data.pageNum,
      pageSize: data.pageSize,
      shopId: data.id,
      status: '上架'
    }
  }).then(res => {
    data.petList = res.data?.list
    data.total = res.data?.total
  })
}
loadPetList()

const loadGoodsList = () => {
  // 查询宠物用品列表
  request.get('/goods/selectPage', {
    params: {
      pageNum: data.goodsPageNum,
      pageSize: data.goodsPageSize,
      shopId: data.id,
      status: '上架'
    }
  }).then(res => {
    data.goodsList = res.data?.list
    data.goodsTotal = res.data?.total
    data.goodsList.forEach(item => { item.num = 1 })
  })
}
loadGoodsList()
</script>

<style scoped>
.text-info {
  font-size: 13px;
  color: #9499a0;
}
.text-click {
  margin-left: 20px;
}
.text-click:hover {

}
</style>